import React, { useRef, useState } from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';
import styles from './index.module.less';

const Slider = (props) => {
  const { className } = props;

  const sliderValueRef = useRef(null);

  const [value, setValue] = useState(16);

  const sliderProps = {
    fill: '#0B1EDF',
    background: 'rgba(255, 255, 255, 0.214)',
  };

  function applyFill(val, min, max) {
    const percentage = (100 * (val - min)) / (max - min);
    const bg = `linear-gradient(90deg, ${sliderProps.fill} ${percentage}%, ${sliderProps.background} ${
      percentage + 0.1
    }%)`;
    return { background: bg };
  }

  return (
    <div className={classnames(styles.root, className, styles.range__slider)} data-min="4" data-max="32">
      <div ref={sliderValueRef} data-length={value} className={classnames(styles.length__title, styles['field-title'])}>
        length:
      </div>
      <input
        className={styles.slider}
        style={applyFill(value, 4, 32)}
        title={value}
        placeholder="输入数字"
        type="range"
        min="4"
        max="32"
        value={value}
        onInput={(e) => {
          setValue(e.target.value);
        }}
      />
    </div>
  );
};

Slider.defaultProps = {
  className: null,
};

Slider.propTypes = {
  className: PropTypes.any,
};

export default Slider;
